import style from './index.module.scss'
import Icon from '@/components/Icon'
import { RootState } from '@/store'
import {
  addChannel,
  changeChannelId,
  deleteChannel,
  getAllChannels,
  getChannels,
} from '@/store/action/channel'
import { Popup, Tabs } from 'antd-mobile'
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import lodash from 'lodash'
import classNames from 'classnames'
import { Channel as ChannelType } from '@/store/reducer/channel'
import history from '@/utils/history'

export default function Channel() {
  const [popupShow, setPopupShow] = useState(false)

  const dispatch = useDispatch()

  const { list, allList } = useSelector((state: RootState) => state.channel)

  // const leftList = allList.filter((item) => {
  //   const obj = list.find((item2) => item2.id === item.id)
  //   return obj ? false : true
  // })

  const leftList = lodash.differenceBy(allList, list, 'id')

  useEffect(() => {
    dispatch(getChannels())
    dispatch(getAllChannels())
  }, [dispatch])

  const { activeId } = useSelector((state: RootState) => state.channel)

  const [editable, setEditable] = useState(false)

  const handleAdd = (item: ChannelType) => {
    dispatch(addChannel(item))
  }

  return (
    <div className={style.root}>
      <Tabs
        className="tabs"
        activeKey={String(activeId)}
        onChange={(key: string) => dispatch(changeChannelId(Number(key)))}
      >
        {/* 💥踩坑：Tabs.TabPane 在 v5.0.0-beta.22 版本改名称为 Tabs.Tab */}
        {/* https://github.com/ant-design/ant-design-mobile/issues/4409 */}
        {/* 以前写法：<Tabs.TabPane title='水果' key='fruits' /> */}
        {/* 新版写法：<Tabs.Tab title='水果' key='fruits' /> */}
        {list.map((item) => (
          <Tabs.Tab title={item.name} key={item.id} />
        ))}
      </Tabs>
      <div className="right">
        <Icon
          type="iconbtn_search"
          onClick={() => history.push('/srarch')}
        ></Icon>
        <Icon type="iconbtn_channel" onClick={() => setPopupShow(true)}></Icon>
      </div>
      <Popup
        bodyClassName={style.channelPopup}
        visible={popupShow}
        position="right"
        // bodyStyle={{ minWidth: '100vw' }}
      >
        {/* 顶部栏：带关闭按钮 */}
        <div className="channel-header">
          <Icon
            type="iconbtn_channel_close"
            onClick={() => setPopupShow(false)}
          />
        </div>

        {/* 频道列表 */}
        <div className="channel-content">
          {/* 当前已选择的频道列表 */}
          <div className={classNames('channel-item', editable ? 'edit' : '')}>
            <div className="channel-item-header">
              <span className="channel-item-title">我的频道</span>
              <span className="channel-item-title-extra">点击进入频道</span>
              <span
                className="channel-item-edit"
                onClick={() => setEditable(!editable)}
              >
                {editable ? '完成' : '编辑'}
              </span>
            </div>

            <div className="channel-list">
              {list.map((item) => (
                <span
                  key={item.id}
                  className={classNames(
                    'channel-list-item',
                    item.id === activeId ? 'selected' : ''
                  )}
                  onClick={() => {
                    dispatch(changeChannelId(item.id))
                    setPopupShow(false)
                  }}
                >
                  {item.name}
                  <Icon
                    type="iconbtn_tag_close"
                    onClick={(e) => {
                      e.stopPropagation()
                      dispatch(deleteChannel(item.id))
                    }}
                  />
                </span>
              ))}
            </div>
          </div>

          {/* 推荐的频道列表 */}
          <div className="channel-item">
            <div className="channel-item-header">
              <span className="channel-item-title">频道推荐</span>
              <span className="channel-item-title-extra">点击添加频道</span>
            </div>
            <div className="channel-list">
              {leftList.map((item) => (
                <span
                  className="channel-list-item"
                  key={item.id}
                  onClick={() => handleAdd(item)}
                >
                  + {item.name}
                </span>
              ))}
            </div>
          </div>
        </div>
      </Popup>
    </div>
  )
}
